<template>
  <div>
    <!-- 新建分类弹窗模块 -->
    <div v-transfer-dom>
      <confirm v-model="addType"
               ref="confirm"
               show-input
               title="新建分类"
               @on-confirm="postNewTodoType()">
      </confirm>
    </div>
    <!--插入验证提示框-->
    <div v-transfer-dom>
      <alert v-model="isShowAlert"> {{alertText}}</alert>
    </div>
    <div class="main">
      <div style="height:15px"></div>
      <!-- 选择待办分类模块 -->
      <div style="position:absolute;left:15px;">
        <el-select
          size="small"
          :disabled="readonly"
          v-model="selectedTodo.tagId"
          filterable
          placeholder="请选择事项分类"
          @show="this.getTodoType()">
          <el-option
            v-for="item in tagList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        <!-- 添加分类标签button -->
        <i class="fa fa-plus-square" style="color:blue" @click="addTodoType()"></i>
        <span style="color:#1989fa"
              @click="addTodoType()">新建</span>
        <span>&nbsp;</span>
        <!-- 删除分类标签button -->
        <i class="fa fa-minus-square" style="color:red" @click="deleteTodoType()"></i>
        <span style="color:#FF0000"
              @click="deleteTodoType()">删除</span>
      </div>
      <div style="height:40px"></div>
      <div style="height:15px"></div>
      <flexbox orient="vertical">
        <!-- 是否为导师安排 -->
        <flexbox-item>
          <x-switch title="导师安排" :disabled="readonly" :value-map="tutorArrange" v-model="isTutorArrange" @on-change="tutorCheck()"></x-switch>
        </flexbox-item>
        <!-- 待办事项标题 -->
        <flexbox-item>
          <x-input title="待办标题："
                   :readonly="readonly"
                   v-model="selectedTodo.title"
                   :max="20"
                   placeholder="请输入待办标题（不多于20字）"></x-input>
        </flexbox-item>
        <!-- 待办事项详情 -->
        <flexbox-item>
          <x-textarea title="待办详情："
                      :readonly="readonly"
                      v-model="selectedTodo.detail"
                      :max="256" :rows="10"
                      placeholder="请输入待办详情"></x-textarea>
        </flexbox-item>
      </flexbox>
      <div style="height:15px"></div>
      <!-- 保存/提交待办 -->
      <flexbox>
        <flexbox-item>
          <x-button v-show="showConfirm"
                    style="width:200px" type="primary"
                    @click.native="postTodoOnPage()">保存修改</x-button>
        </flexbox-item>
      </flexbox>
      <div style="height:25px"></div>
      <flexbox>
        <flexbox-item>
          <x-button v-show="isPush"
                    type="primary" style="width:200px"
                    @click.native="clickPushTodo()">完成待办</x-button>
        </flexbox-item>
      </flexbox>
      <!-- 点击 确认完成 触发的提示框一：向导师推送 -->
      <div v-transfer-dom>
        <confirm v-model="isShowPushAlert"
                 title="确认完成"
                 @on-confirm="pushTodo()">
          <p style="text-align:center;">向导师报告完成此待办</p>
        </confirm>
      </div>
      <!-- 点击 确认完成 触发的提示框二：不向导师推送 -->
      <div v-transfer-dom>
        <confirm v-model="isShowConfirmDone"
                 title="确认完成"
                 @on-confirm="pushTodo()">
          <p style="text-align:center;">确认完成此待办</p>
        </confirm>
      </div>

      <div style="height:25px"></div>
      <flexbox>
        <flexbox-item>
          <x-button v-show="isUnconfirm"
                    type="primary" style="width:200px"
                    @click.native="unDoneTodo()">撤销操作</x-button>
        </flexbox-item>
      </flexbox>
      <div style="height:2px"></div>
      <flexbox>
        <flexbox-item>
          <x-button v-show="isDelete"
                    type="primary" style="width:200px"
                    @click.native="deleteTodo()">删除待办</x-button>
        </flexbox-item>
      </flexbox>
      <div style="height:25px"></div>
    </div>
  </div>
</template>
<script>
  import {
    XInput,
    Group,
    XHeader,
    XTextarea,
    Flexbox,
    FlexboxItem,
    PopupHeader,
    Popup,
    Radio,
    TransferDom,
    Confirm,
    XButton,
    XSwitch
  } from 'vux'
  import {mapState} from 'Vuex'
  import todo from 'api/todo'
  import tags from 'api/tag'
  import  { ToastPlugin } from 'vux'
  Vue.use(ToastPlugin)

  export default {
    name: "S_inputTodo",
    data() {
      return {
        isShowAlert: false, // 是否显示验证提示框
        alertText: '',
        saveSuccess: false,
        addType: false, // 控制新建分类的弹窗是否出现
        isShowPushAlert: false, // 控制是否显示向导师推送确认框
        isShowConfirmDone: false, // 控制是否显示非导师安排待办完成的确认框
        postCount: 0,
        isTutorArrange: this.$store.state.todo.todoSelected.bossId,
        selectedTodo: {},//接收从全部待办页面传来的某条待办的信息
        tagList: [],
      }
    },
    components: {
      XInput,
      Group,
      XHeader,
      XTextarea,
      PopupHeader,
      Popup,
      Radio,
      TransferDom,
      Confirm,
      XButton,
      XSwitch,
      Flexbox,
      FlexboxItem,
    },
    directives: {
      TransferDom
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo,
        todoSelected: state => state.todo.todoSelected,
        page_type_of_S_inputTodo: state => state.todo.page_type_of_S_inputTodo,
        page_title_of_S_inputTodo: state => state.todo.page_title_of_S_inputTodo,
        readonly: state => state.todo.readonly,
        showConfirm: state => state.todo.showConfirm,
        isPush: state => state.todo.isPush,
        isUnconfirm: state => state.todo.isUnconfirm,
        isDelete: state => state.todo.isDelete
      }),
      tutorArrange(){
        const arr = []
        let boss = this.userInfo.bossId
        arr.push(0)
        arr.push(boss)
        return arr
      },
    },
    created() {
      this.selectedTodo = this.todoSelected
      this.getTodoType()
    },
    mounted() {
      this.getTodoType()
    },
    methods: {
      back() {
        this.$router.go(-1)
      },
      addTodoType() {
        this.addType = true
      },
      // 这里有问题，需要改动
      tutorCheck() {
        console.log("tutorCheck()----")
        console.log(this.isTutorArrange)
        this.selectedTodo.bossId = this.isTutorArrange
      },
      messageDeliver(_text, _type, _time) {
        this.$vux.toast.show({
          text: _text,
          type: _type,
          time: _time,
        })
      },
      async putFunction(selectedTodo, message)
      {
        console.log(selectedTodo)
        const result = await todo.putTodo(selectedTodo)
        console.log(result)
        if (result.code === 1) {
          this.messageDeliver(message+"成功", "success", "1000")
          setTimeout(this.back(), 1000)
        } else if (result.code === 0) {
          this.messageDeliver(message+"失败", "warn", "1000")
        }
      },
      async deleteTodoType() {
        const result = await tags.deleteTagById(this.selectedTodo.tagId)
        if (result.code === 0) {
          this.messageDeliver("此标签有未完成待办，无法删除", "warn", "3000")
        } else {

          this.getTodoType()
          this.selectedTodo.tagId = null
        }
      },
      async postNewTodoType() {
        // this.$refs.confirm.msg中存放的就是弹框的输入框中输入的内容
        let tag = []
        tag.push(this.$refs.confirm.msg)
        const result = await tags.postTags(tag)
        if (result.code === 1) {
          this.messageDeliver("新建成功", "success", "1000")
          this.getTodoType()
        } else if (result.code === 0) {
          console.log('新建',result)
          this.messageDeliver(result.message, "warn", "1000")
        }
      },
      async postTodoOnPage() {
        console.log(this.selectedTodo.tagId)
        console.log(this.selectedTodo.title)
        if (this.page_type_of_S_inputTodo === 0 && this.postCount === 0) {
          if (this.selectedTodo.tagId === undefined || this.selectedTodo.title === undefined) {
            this.messageDeliver("请完善信息", "warn", "1700")
            return
          }
          const result = await todo.postTodo(this.selectedTodo)
          if (result.code === 1) {
            this.messageDeliver("新建成功", "success", "1000")
            this.postCount = 1
            setTimeout(this.back, 1500)
          } else if (result.code === 0) {
            this.messageDeliver("新建失败", "warn", "1000")
          }
        } else if (this.page_type_of_S_inputTodo === 1) {
          this.putFunction(this.selectedTodo, "更新")
        }
      },
      async deleteTodo() {
        console.log("selectedTodo.id: " + this.selectedTodo.id)
        const result = await todo.deleteTodoById(this.selectedTodo.id)
        console.log('deleteResult',result)
        if (result.code === 1) {
          this.messageDeliver("删除成功", "success", "1000")
          setTimeout(this.back(), 1000)
        } else if (result.code === 0) {
          this.messageDeliver("删除失败", "warn", "1000")
        }
      },
      // 向导师推送消息
      // 或完成非导师安排任务后确认完成，将状态改变为已完成
      clickPushTodo() {
        if (this.selectedTodo.bossId === this.userInfo.bossId)
        {
          this.isShowPushAlert = true
        } else {
          this.isShowConfirmDone = true
        }

      },
      async pushTodo() {
        this.selectedTodo.done = true
        this.putFunction(this.selectedTodo, "提交")
        if (this.selectedTodo.bossId !== null) {
          console.log("向导师推送此待办")
        } else {
          console.log("自己指导完成了此待办")
        }
      },

      // 撤销将待办设置为已完成的操作（将待办从已完成变为进行中）
      async unDoneTodo() {
        this.selectedTodo.done = false
        this.putFunction(this.selectedTodo, "撤销")
      },

      // 获取todoTypeList
      async getTodoType() {
        const result = await tags.getTags()
        if (result.code === 1) {
          this.$store.state.todoTypeList = result.data
          for(let i = 0; i < result.data.length; i++) {
            this.$store.state.todoTypeNameList[i] = result.data[i].name
          }
          this.tagList = this.$store.state.todoTypeList
        } else if (result.code === 0) {
          console.log(result.message)
        }
      },
    },

  }
</script>
<style lang="less">

  x-header {
    position: absolute;
  }

  .el-message-box {
    width: auto;
  }

  .weui-toast.weui-toast_forbidden .weui-toast__content {
    margin-top: 10px;
    color: rgb(245, 238, 238);
  }

  .weui-toast.weui-toast_success .weui-toast__content {
    margin-top: 10px;
    color: rgb(245, 238, 238);
  }

  /*.button {
    left:230px;
  }
*/
</style>
